/** === MENU ==== */

.menu{
  position: relative;
  z-index: 10;
  white-space: nowrap;
  padding: 0 1em;

  //the container under .menu
  .main{
    font-size: 12px;
    font-weight: normal;
    right: 0;
    top: 100%;
    margin-top: -30px;
  }
  //sub-menu indicator
  .sub:before{
    content: "\25E3";
    position: absolute;
    left: 9px;
  }
  //initially hidden menu
  ul{
    display: none;
    position: absolute;
    top: -30px;
    margin: 0 -20px 0 0;
    /* fix buffer offset */
    right: 100%;
    padding: 30px 20px 60px 40px;
    /* buffer area */
    /*	background: rgba(255,255,255,0.4);*/
  }
  //list items inside the menu
  li{
    list-style: none;
    position: relative;
    padding: 5px 20px;
    line-height: 20px;
    height: 20px;
    min-width: 4em;
    cursor: default;
    &:hover{
      z-index: 2;
      //buffer area on hover
      &:after{
        content: "";
        display: block;
        position: absolute;
        left: 0;
        height: 8px;
        top:100%;
        width: 100%;
        /*	background: rgba(255,255,255,0.4)*/
      }
    }
  }

  //menu drop down indicator
  &:after{
    position: absolute;
    @include css-triangle(4px, $brand-color, top);
    right: 0;
    top: 50%;
  }

  // mouse right click context menu
  &.context{
    display: none;
    position: fixed;
    padding: 1px;
    &:after{
      content: none;
    }
  }
}

.sub:hover > ul {
  display: block;
  -webkit-animation: fadeIn 0.2s ease-in-out;
  animation: fadeIn 0.2s ease-in-out;
}


@each $key, $value in $theme{
  @if map-has_key($config, $key){
    .#{$value}{

      .menu{
        li{
          background: setStyle($config, $key, menu-item-bg);
          color: setStyle($config, $key, menu-text);
          &:hover{
            background: setStyle($config, $key, menu-item-bg-hover);
          }
        }
      }
      //list items that have a divider line underneath it
      .hr{
        border-bottom: 1px solid setStyle($config, $key, menu-divider);
      }

    }
  }
  @else {
    @warn "The key isn't defined in the map setting"
  }
}